<template lang='pug'>
.list-to
    Bnner(:bnnerList="bnnerList" height='1.87rem')
    NavList(:navList="navList")
    .princess
        .left
        .right
            p
            p
    .listBox
        GloFir(v-for="item in glo" :key="item.id" :item="item" :width="'49%'" :flg="0")
    .bottomImag
        ul
            li(v-for="d in gBut")
                img(:src="d.cover")
</template>
 
<script>
import Bnner from '../../components/Bnner.vue'
import NavList from '../../components/NavList.vue'
import GloFir from '../../components/GloFir.vue'
export default {
  data() {
    return {
      bnnerList: [],
      navList: [],
      glo: [],
      gBut: []
    };
  },
  components:{
      Bnner,
      NavList,
      GloFir
  },
  methods:{
      getBnner(){
        this.$http.get('ajaxdata/reconme/bnner.json').then(({data})=>{
            this.bnnerList = data
        })
      },
      getNavList(){
          this.$http.get('ajaxdata/reconme/classify.json').then(({data})=>{
              this.navList = data
          })
      },
      getGlo(){
          this.$http.get('ajaxdata/reconme/tabulation.json').then(({data})=>{
              this.glo = data
          })
      },
      getBottomImage(){
          this.$http.get('ajaxdata/reconme/studyList.json').then(({data})=>{
              this.gBut = data.list
          })
      }
  },
  created(){
     this.getBnner()
     this.getNavList()
     this.getGlo()
     this.getBottomImage()
  }
};
</script>
 
<style scoped lang="sass">
.princess
    width: 100%
    height: 2.65rem
    margin-top: .04rem
    display: flex
    .left
        width: 49.79%
        height: 100%
        background: url('//cdn.cnbj1.fds.api.mi-img.com/mi-mall/29b39579739d82269d18f0e7c8f6c9da.jpg?f=webp&w=537&h=762&bg=57524C')
        background-size: contain
    .right
        width: 50%
        height: 100%
        p
            width: 100%
            height: 50%
            background: url('//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5b9af94e5c05bb2b4849cbb113eddb9d.jpg?f=webp&w=537&h=378&bg=EBF8FF')
            background-size: contain
            border-left: 2px solid #fff
        p+p
            background: url('//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a12873ff30a6da401d74728878625c37.jpg?f=webp&w=537&h=378&bg=D2EDFF')
            background-size: contain
.bottomImag
    ul
        width: 100%
        display: flex
        flex-wrap: wrap
        // background: #000
        justify-content: space-between 
        li
            width: 49.5%
            height: 2.52rem
            img
                width: 100%
                height: 100%
                    
</style>